import React from 'react'
import { Layout } from 'antd'
import { useStore } from '@/store'
import { observer } from 'mobx-react'
import Hamburger from '@/components/Hamburger'
import Logo from '@/assets/logo.svg'
import SiderMenu from './Menu'

const { Sider } = Layout

const AppSider = () => {
  const { appStore } = useStore()
  const { collapsed } = appStore

  return (
    <Sider width={250} theme="light" collapsed={collapsed} className="layout-aside-Default">
      <div className={`app-logo ${!collapsed ? '' : 'app-logo-on'}`}>
        <div className="logo-wrap"><img src={Logo} className="app-logo-img" alt="react-tiger-admin" /></div>
        <div className="app-name">React-Build-Admin</div>
        <Hamburger />
      </div>
      <SiderMenu />
    </Sider>
  )
}

export default observer(AppSider)
